{extend name="common@portalBase" /}
{block name="content"}
<style>
  .btn-question {
    margin: 5px;
  }

  .flag {
    position: absolute;
    top: -10px;
    right: -5px;
    color: #f00;
    border-radius: 50%;
  }
  .panel-title {
    font-weight: bold;
  }

  .text-question {
    line-height: 300%;
    font-size: larger;
  }

  .red {
    color: red;
  }
</style>
<section class="content" id="exam">
  <div class="row">
    <div class="col-xs-12 col-md-10">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">第{{cursor+1}}题
            <div class="qType">{{type==0 ? '判断题' : '单选题'}}</div>
          </h3>
        </div>
        <div class="panel-body">
          <div class="text-question">
            {{content}}
          </div>
          <hr/>
          <div class="list-group">
            <a href="#" class="list-group-item "
               v-on:click="answerClick(index)"
               v-for="(item,index) in answers">
              {{item}}
              <div class="pull-right">
                <i class="fa fa-check text-success" v-show="active==index"></i></div>
            </a>
          </div>
          <a href="#" class="btn btn-default hide" v-show="cursor>0" v-on:click="lastQuestion">上一题</a>
          <a href="#" class="btn btn-default hide" v-show="cursor<cursorMax-1" v-on:click="nextQuestion">下一题</a>
          <div class="pull-right">
            <a href="#" class="btn btn-danger" v-on:click="signQuestion"><i class="fa fa-flag"></i></a>
          </div>
        </div>
        <div class="panel-footer">
          <label for="">题目列表</label>
          <div class="row div-btn-question" style="margin:auto;overflow-y:scroll;max-height: 300px;">
            <div type="button" class="btn btn-default btn-question col-xs-2 col-sm-1" v-for="(item,index) in cursors"
                 v-bind:class="[cursor==index ? 'active' : '',paperAnswers[index]!=undefined ? 'btn-primary' : '']"
                 v-on:click="getQuestion(index)">{{item}}
              <span class="flag" v-show="paperSign[index]==true"><i class="fa fa-flag"></i></span>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="col-xs-12 col-md-2">
      <div class="panel panel-default">
        <ul class="list-group" id="room-info">
          <li class="list-group-item">剩余时间：<span>{{minuteStr}}</span>:<span>{{secondStr}}</span></li>
          <li class="list-group-item" style="text-align: center">
            <button class="btn btn-danger btn-block" v-if="examFinish">已交卷</button>
            <button class="btn btn-primary btn-block" v-on:click="examSubmit" v-if="!examFinish">交卷</button>
          </li>
        </ul>

      </div>
    </div>
  </div>
</section>
{/block}
{block name="page_script"}
<script>
  require(["vue", "layer_config", "ajaxForm"], function (Vue, layer) {
    var exam = new Vue({
      el: "#exam",
      data: {
        minute: {$minute}, //考试持续时间中的分钟
        second: {$second}, //考试时间中的秒
        nowTimestamp: {$nowTimestamp}, //当前时间戳
        cursorMax: {$cursorMax}, //最大游标
        content: '',  //问题
        answers: [],  //答案
        cursor: {$cursor}, //当前游标
        cursors: {$cursors}, //所有游标，用于分页
        active: -1,
        lastActive: -1,
        paperAnswers: [],
        paperQuestions: [],
        paperSign: [],
        paperId: {$paperId},
        paperQuestionIDs: [],
        examFinish: {$examFinish},
        passScore: {$passScore},
        testAnswerId: {$testAnswerId},
        type:0
      },
      created: function () {
        var that = this;
        this.timeCountdown();
        $.post("{:url('getPaperQuestions')}", {"paper_id": that.paperId}, function (result) {
          if (result) {
            if (result.code == 1) {
              var id = -1, cursor = that.cursor;
              that.paperQuestionIDs = result.data.paperQuestionIDs;
              id = that.paperQuestionIDs[cursor];
              that.paperQuestions = result.data.paperQuestions;
              that.content = that.paperQuestions[id].content;
              that.answers = JSON.parse(that.paperQuestions[id].answers);
              that.active = result.data.active;
              that.paperAnswers = result.data.paperAnswers;
              that.paperSign = result.data.paperSign;
              that.type = that.paperQuestions[id].type;
            } else {
              js_alert(result.msg);
            }
          } else {
            js_alert('网络故障');
          }
        });
      },
      computed: {
        minuteStr:function(){
          var m=this.minute;
          console.log(m);
          
          return m>10 ? m : '0'+m;
        },
        secondStr:function(){
          var m=this.second;
          console.log(m);

          return m>10 ? m : '0'+m;
        }
      },
      watch: {
        cursor: function (id) {
          //console.log(id);
        }
      },
      methods: {
        //提交数据
        examSubmit: function (e) {
          var keys = Object.keys(this.paperAnswers);
          var that = this;
          var msg = "确定要提交考卷吗？";
          if (this.examFinish) {
            js_alert('考卷已经提交，不能再次提交');
            return false;
          }
          if (keys.length < this.cursorMax) {
            msg = ('考卷还没有完成，确定要提交考卷吗');
          }
          layer.confirm(msg, {icon: 3, title: '提示'}, function (index) {
            $.post("{:url('finish')}", {"id": that.testAnswerId}, function (result) {
              if (result && result.code == 1) {
                /*
                var message="本场考试得分要求为" + that.passScore + "分"
                  message += ",您的得分是" + result.data.score + "分";
                  message += ",本场考试您击败了" + result.data.score_sort + "名对手。";*/
                that.examFinish = 1;
                js_alert(result.msg,function(){
                  window.location.href="{:url('knowledge/index')}";
                });
                return false;
              }
              js_alert(result ? result.msg : "网络故障");
            });
            layer.close(index);
          });
        },
        signQuestion: function () {
          var that = this;
          var cursor = this.cursor;
          var sign = this.paperSign[cursor];
          $.post("{:url('signQuestion')}", {
            "id": that.testAnswerId,
            "cursor": cursor,
          }, function (result) {
            if (result && result.code == 1) {
              that.paperSign[cursor] = !sign;
              js_message(sign ? '取消标记' : '标记成功');
              return false;
            }
            js_alert(result ? result.msg : '网络错误');
          });
        },
        answerClick: function ($index) {
          var that = this;
          var active = $index;
          var cursor = this.cursor;
          if (this.active == active)
            return false;
          $.post("{:url('doAnswer')}", {
            "id": that.testAnswerId,
            "cursor": cursor,
            'answer': active
          }, function (result) {
            if (result && result.code == 1) {
              that.paperAnswers[cursor] = active;
              that.active = $index;
              js_message('答题成功');
              that.nextQuestion();
            } else {
              js_alert(result ? result.msg : '网络错误');
            }
          })
        },
        timeCountdown: function () {
          var that = this, minute = parseInt(this.minute), second = parseInt(this.second),
            nowTimestamp = this.nowTimestamp;
          var newTime;
          var t = setInterval(function () {
            nowTimestamp += 1;
            newTime = new Date(nowTimestamp * 1000);
            that.nowTime = newTime.toTimeString().substr(0, 8);
            if (minute == 0 && second == 0) {
              clearInterval(t);
              if (this.examFinish == 0) {
                js_alert('考试时间结束，点击确定自动交卷', function () {
                  that.examSubmit();
                })
              } else {
                js_alert('考试已经结束');
              }
              return false;
            }
            if (second > 0) {
              second--;
            } else {
              if (minute >= 0) {
                minute--;
                second = 59;
              }
            }
            that.minute = minute;
            that.second = second;
          }, 1000);
        },
        getQuestion: function (cursor) {
          var that = this;
          var nowCusor = this.cursor;
          var active = this.active;
          var id = that.paperQuestionIDs[cursor];
          if (cursor == this.cursor) return false;

          that.content = that.paperQuestions[id].content;
          that.answers = JSON.parse(that.paperQuestions[id].answers);
          that.active = that.paperAnswers[cursor];
          that.cursor = cursor;
          that.type = that.paperQuestions[id].type;
        },
        nextQuestion: function (e) {
          if (this.cursor > this.cursorMax)
            return false;
          this.getQuestion(this.cursor + 1);
        },
        lastQuestion: function (e) {
          if (this.cursor <= 0)
            return false;
          this.getQuestion(this.cursor - 1);
        }
      },
    });
  });
</script>
{/block}





